<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/market/marketingPlay' }"> <i class="el-icon-lx-cascades"></i> 营销玩法 </el-breadcrumb-item>
                <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 限时折扣 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-button type="primary" class="handle-del mr10" @click="addDialog">新增限时折扣</el-button>
            <div class="handle-box">
                <el-input v-model="query.keyword" placeholder="输入活动名称" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
            </div>
            <el-table :data="tableData" class="table" ref="multipleTable" header-cell-class-name="table-header">
                <el-table-column prop="name" label="活动名称"></el-table-column>
                <el-table-column label="活动状态">
                    <template slot-scope="scope">
                        <span
                            :style="
                                scope.row.time_status == 0 ? 'color: #e6a23c' : scope.row.time_status == 1 ? 'color: green' : 'color: #888'
                            "
                        >
                            {{ scope.row.time_status == 0 ? '未开始' : scope.row.time_status == 1 ? '进行中' : '已结束' }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="有效期" width="200">
                    <template slot-scope="scope">
                        <span class="valide_date">起：{{ scope.row.start_time }}</span>
                        <span class="valide_date">止：{{ scope.row.end_time }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="info_list.length" label="商品数量"></el-table-column>
                <el-table-column prop="liulan_num" label="浏览量"></el-table-column>
                <el-table-column prop="fangke_num" label="访客量"></el-table-column>
                <el-table-column prop="buy_num" label="购买量"></el-table-column>
                <el-table-column label="实收金额（元）">
                    <template slot-scope="scope">
                        <span class="red">¥ {{ scope.row.money }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-row>
                            <el-button @click="edit(scope.row)" v-if="scope.row.time_status != 2" type="success" size="mini"
                                >编辑</el-button
                            >
                            <el-button @click="end(scope.row.id)" v-if="scope.row.time_status != 2" type="warning" size="mini"
                                >立即结束</el-button
                            >
                            <el-button @click="Descriptions(scope.row)" v-if="scope.row.time_status == 2" type="success" size="mini"
                                >查看</el-button
                            >
                            <el-button
                                @click="deleteRow(scope.row.id, scope.$index)"
                                v-if="scope.row.time_status == 2"
                                type="danger"
                                size="mini"
                                >删除</el-button
                            >
                        </el-row>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="query.page"
                    :page-size="query.rows"
                    :total="pageTotal"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>
        <!-- 新增限时折扣弹出框 -->
        <el-dialog title="新增/编辑" @close="cancel" :visible.sync="showDialog">
            <el-form ref="form" :model="form" label-width="100px">
                <p class="topTitle">活动信息</p>
                <el-form-item label="活动名称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="活动时间">
                    <el-date-picker
                        v-model="useTimeDate"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd HH:mm:ss"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="活动标签">
                    <el-input v-model="form.tag"></el-input>
                </el-form-item>
                <p class="topTitle">商品信息</p>
                <el-form-item label="添加商品">
                    <el-button @click="chooseCourse" type="primary" size="small">添加商品</el-button>
                </el-form-item>
                <div class="good_info" v-for="(item, index) in form.info_list" :key="index">
                    <div class="course-info-wrapper">
                        <div class="img-wrapper fl">
                            <img :src="item.cover" alt="" class="info-image" />
                        </div>
                        <div class="info-detail fl">
                            <span>{{ item.title }}</span>
                            <p>
                                <span class="price"> ￥ {{ item.price }} </span>
                                <span style="color: #999">
                                    商品类型：{{
                                        item.type == 'image_text'
                                            ? '图文'
                                            : item.type == 'audio'
                                            ? '音频'
                                            : item.type == 'video'
                                            ? '视频'
                                            : '专栏'
                                    }}
                                </span>
                            </p>
                        </div>
                    </div>
                    <div class="discount">
                        <el-radio-group v-model="item.discount_type" @change="discount(item)">
                            <el-radio :label="1">打<el-input v-model="item.discount" size="mini"></el-input>折</el-radio>
                            <el-radio :label="2">减<el-input v-model="item.discount_price" size="mini"></el-input>元</el-radio>
                        </el-radio-group>
                        <span class="red"
                            >折后 ￥
                            {{
                                item.discount_type == 1
                                    ? ((item.price * item.discount) / 10).toFixed(2)
                                    : (item.price - item.discount_price).toFixed(2)
                            }}
                            元</span
                        >
                        <span>限量<el-input v-model="item.discount_num" size="mini"></el-input>个</span>
                        <el-button @click="del_good(index)" type="text" style="margin-left: 30px">取消</el-button>
                    </div>
                </div>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 选择产品类型 -->
        <el-dialog width="30%" title="选择产品类型" :visible.sync="productTypeVisible" append-to-body>
            <div class="product_type">
                <span v-for="item in productType" :key="item.id" @click="chooseType(item.value)">
                    {{ item.label }}
                </span>
            </div>
        </el-dialog>
        <!-- 打开内层弹框 -->
        <el-dialog width="36%" :title="`选择${productTypeTitle}`" @close="exit" :visible.sync="innerVisible" append-to-body>
            <el-form ref="form" :model="form" label-width="100px">
                <el-form-item>
                    <el-input v-model="query.keyword" :placeholder="`输入${productTypeTitle}名称`" class="handle-input mr10"></el-input>
                    <el-button type="primary" icon="el-icon-search" @click="courseSearch">搜索</el-button>
                </el-form-item>
                <el-table
                    :data="chooseCourseTableData"
                    @row-click="chooseRow"
                    class="chooseCourseTable"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                >
                    <el-table-column :label="`${productTypeTitle}封面`">
                        <template slot-scope="scope">
                            <img :src="scope.row.cover" alt="" class="info-image" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="title" :label="`${productTypeTitle}名称`"></el-table-column>
                    <el-table-column label="免费/付费">
                        <template slot-scope="scope">
                            <span style="color: #e65c5c">{{ scope.row.price == 0 ? '免费' : '¥ ' + scope.row.price }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="type" :label="`${productTypeTitle}类型`" v-if="productTypeTitle == '课程'">
                        <template slot-scope="scope">
                            {{ scope.row.type == 'video' ? '视频' : scope.row.type == 'audio' ? '音频' : '图文' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="状态">
                        <template slot-scope="scope">
                            {{ scope.row.status == 0 ? '未上架' : '已上架' }}
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination">
                    <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="query.page"
                        :page-size="query.rows"
                        :total="courseListTotal"
                        @current-change="coursePageChange"
                    ></el-pagination>
                </div>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="exit">关 闭</el-button>
            </span>
        </el-dialog>
        <el-dialog title="折扣信息" :visible.sync="dialogTableVisible">
            <el-descriptions>
                <el-descriptions-item label="活动名称">{{ Descriptionsobj.name }}</el-descriptions-item>
                <el-descriptions-item label="开始时间">{{ Descriptionsobj.start_time }} </el-descriptions-item>
                <el-descriptions-item label="结束时间">{{ Descriptionsobj.end_time }}</el-descriptions-item>
                <el-descriptions-item label="浏览量"> {{ Descriptionsobj.liulan_num }} </el-descriptions-item>
                <el-descriptions-item label="访客量">{{ Descriptionsobj.fangke_num }}</el-descriptions-item>
                <el-descriptions-item label="购买量">{{ Descriptionsobj.buy_num }}</el-descriptions-item>
                <el-descriptions-item label="成交金额">¥ {{ Descriptionsobj.money }}</el-descriptions-item>
            </el-descriptions>
            <el-table :data="Descriptionsary" style="width: 100%">
                <el-table-column prop="title" label="封面" >
                    <template slot-scope="scope">
                        <img style="width: 50px;height:50px" :src="scope.row.cover" alt="" />
                    </template>
                </el-table-column>
                <el-table-column prop="title" label="名称" > </el-table-column>
                <el-table-column prop="price" label="价格" > </el-table-column>
                <el-table-column prop="type" label="商品类型">
                    <template slot-scope="scope">
                        <span v-if="scope.row.type == 'image_text'">图文</span>
                        <span v-if="scope.row.type == 'video'">视频</span>
                        <span v-if="scope.row.type == 'column'">专栏</span>
                    </template>
                </el-table-column>
                <el-table-column prop="discount" label="折扣">
                    <template slot-scope="scope">
                        <span v-if="scope.row.discount_type == 1">{{ scope.row.discount }}折</span>
                        <span v-if="scope.row.discount_type == 2">减{{ scope.row.discount_price }}元</span>
                    </template>
                </el-table-column>
                <el-table-column prop="discount_num" label="数量"> </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script>
import {
    limitDiscountListData,
    videoListData,
    columnListData,
    examListData,
    addLimitDiscountData,
    delLimitDiscountData,
    checkById
} from '../../api/index';
export default {
    // name: 'lecturer',
    data() {
        return {
            dialogTableVisible: false,
            Descriptionsobj: {},
            Descriptionsary: [],
            query: {
                page: 1,
                rows: 6,
                keyword: ''
            },
            form: {
                k_id: '',
                info_type: '',
                name: '',
                start_time: '',
                end_time: '',
                tag: '',
                info_list: []
            },

            productType: [
                {
                    value: 'image_text',
                    label: '图文'
                },
                {
                    value: 'audio',
                    label: '音频'
                },
                {
                    value: 'video',
                    label: '视频'
                },
                {
                    value: 'column',
                    label: '专栏'
                }
            ],
            nowDateTime: '',
            useTimeDate: [],
            tableData: [],
            chooseCourseTableData: [],
            productTypeTitle: '',
            showDialog: false,
            productTypeVisible: false,
            innerVisible: false,
            pageTotal: 0,
            courseListTotal: 0
        };
    },
    created() {
        this.getData();
        this.Date();
    },
    methods: {
        Descriptions(row) {
            checkById({ id: row.id }).then((res) => {
                console.log(res);
                this.Descriptionsary = res.data.info.goods_id;
            });
            this.Descriptionsobj = row;
            this.dialogTableVisible = true;
        },
        getData() {
            limitDiscountListData(this.query).then((res) => {
                this.tableData = res.data.list;
                this.pageTotal = res.data.count;
            });
        },
        // 搜索
        handleSearch() {
            this.$set(this.query);
            this.getData();
        },
        // 分页
        handlePageChange(val) {
            this.$set(this.query, 'page', val);
            this.getData();
        },
        // 课程分页
        coursePageChange(val) {
            this.$set(this.query, 'page', val);
            this.courseSearch();
        },
        //新增
        addDialog() {
            this.showDialog = true;
        },
        // 课程搜索
        courseSearch() {
            if (this.productTypeTitle == '课程') {
                videoListData(this.query).then((res) => {
                    this.chooseCourseTableData = res.data.list;
                    this.courseListTotal = res.data.count;
                });
            } else if (this.productTypeTitle == '专栏') {
                columnListData(this.query).then((res) => {
                    this.chooseCourseTableData = res.data.list;
                    this.courseListTotal = res.data.count;
                });
            } else {
                examListData(this.query).then((res) => {
                    this.chooseCourseTableData = res.data.list;
                    this.courseListTotal = res.data.count;
                });
            }
        },
        chooseCourse() {
            this.productTypeVisible = true;
        },
        chooseType(type) {
            this.innerVisible = true;
            this.query.page = 1;
            this.query.keyword = '';
            this.query.type = type;
            if (type != 'column') {
                this.productTypeTitle = '课程';
                videoListData(this.query).then((res) => {
                    this.chooseCourseTableData = res.data.list;
                    this.courseListTotal = res.data.count;
                });
            } else {
                this.productTypeTitle = '专栏';
                columnListData(this.query).then((res) => {
                    this.chooseCourseTableData = res.data.list;
                    this.courseListTotal = res.data.count;
                });
            }
        },
        chooseRow(row) {
            this.form.info_list.push({
                id: row.id,
                cover: row.cover,
                title: row.title,
                price: row.price,
                type: row.type,
                discount_type: '',
                discount: '',
                discount_price: '',
                discount_num: ''
            });
            this.form.k_id = row.id;
            if (row.type == 'column') {
                this.form.info_type = 'column';
            } else {
                this.form.info_type = 'knowledge';
            }
            this.innerVisible = false;
            this.productTypeVisible = false;
        },
        discount(item) {
            item.discount_type == 1 ? (item.discount_price = '') : (item.discount = '');
        },
        del_good(index) {
            this.form.info_list.splice(index, 1);
        },
        //确定
        save() {
            this.form.start_time = this.useTimeDate[0];
            this.form.end_time = this.useTimeDate[1];
            addLimitDiscountData(this.form).then((res) => {
                if (res.code == 1) {
                    this.showDialog = false;
                    this.$message.success('操作成功');
                    this.getData();
                } else if (res.code == -1) {
                    // this.showDialog = false;
                    this.$message.success(res.msg);
                }
            });
        },
        //编辑
        edit(row) {
            this.showDialog = true;
            this.form = row;
            this.useTimeDate = [row.start_time, row.end_time];
        },
        //获取当前年月日时分秒
        Date() {
            const nowDate = new Date();
            const date = {
                year: nowDate.getFullYear(),
                month: nowDate.getMonth() + 1,
                date: nowDate.getDate(),
                hours: nowDate.getHours(),
                minutes: nowDate.getMinutes(),
                seconds: nowDate.getSeconds()
            };
            const newmonth = date.month > 10 ? date.month : '0' + date.month;
            const newday = date.date > 10 ? date.date : '0' + date.date;
            const newminutes = date.minutes > 10 ? date.minutes : '0' + date.minutes;
            const newseconds = date.seconds > 10 ? date.seconds : '0' + date.seconds;
            this.nowDateTime = date.year + '-' + newmonth + '-' + newday + ' ' + date.hours + ':' + newminutes + ':' + newseconds;
        },
        // 结束
        end(id) {
            this.$confirm('确定立即结束吗？', '提示', {
                type: 'warning'
            }).then(() => {
                addLimitDiscountData({ id: id, end_time: this.nowDateTime }).then((res) => {
                    if (res.code == 1) {
                        this.$message.success('结束成功');
                        this.getData();
                    }
                });
            });
        },
        //删除
        deleteRow(id, index) {
            // 二次确认删除
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            }).then(() => {
                delLimitDiscountData({ id: id }).then((res) => {
                    if (res.code == 1) {
                        this.$message.success('删除成功');
                        this.tableData.splice(index, 1);
                        this.getData();
                    }
                });
            });
        },
        //取消
        cancel() {
            this.showDialog = false;
            this.form = {};
            this.useTimeDate = '';
        },
        //关闭
        exit() {
            this.innerVisible = false;
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
    float: right;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.mr10 {
    margin-right: 10px;
}
.innerPagination {
    float: left;
}
.dialog-footer {
    display: block;
}
.info-image {
    width: 60px;
    height: 40px;
    border-radius: 4px;
}
.valide_date {
    float: left;
}
.red {
    color: #ea644a;
}
.topTitle {
    margin: 0px 0px 15px 20px;
    line-height: 1;
    color: #353535;
    font-weight: 600;
    font-size: 16px;
    padding-left: 8px;
    border-left: 2px solid #2a75ed;
}
.product_type {
    text-align: center;
}
.product_type span {
    cursor: pointer;
    display: inline-block;
    padding: 0 5px;
    margin: 0 20px;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
}
.chooseCourseTable {
    cursor: pointer;
}
/* 添加商品start */
.good_info {
    padding: 0 30px 20px 30px;
    padding-bottom: 20px;
    font-size: 13px;
    border-bottom: 1px solid #eee;
}
.info-detail {
    margin: 0px 20px 0px 10px;
}
.info-detail p {
    margin-top: 8px;
}
.info-detail .price {
    margin-right: 15px;
    color: #f56c29;
}
.good_info .fl {
    float: left;
}
.discount span {
    margin: 0 15px;
}
.discount span .el-input {
    width: 50px;
    margin: 0px 5px;
}
.discount {
    line-height: 42px;
}
/* 添加商品end */
</style>


